﻿@page "/components/navbar"

<Pager Title="NavBar" Indicates="@(new[]{"Example","Brand","Image & Text"})">
	<Demo Title="Example">
		<Description>
			Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.
		</Description>
		<Run>
			<NavBar BgColor="BgColor.Light">
				<BrandContent>
					<NavBarBrand>NavBar</NavBarBrand>
				</BrandContent>
				<ChildContent>
					<NavBarMenu CssClass="Css.Class.Margin(SpaceNum.Auto, SpaceSide.Right)">
						<NavItem>
							<NavRouteLink Actived>Home</NavRouteLink>
						</NavItem>
						<NavItem>
							<NavRouteLink>Link</NavRouteLink>
						</NavItem>
						<NavDropDownItem>
							<ToggleContent>Dropdown</ToggleContent>
							<DropDownMenuContent>
								<DropDownLinkItem href="#">Action</DropDownLinkItem>
								<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
								<DropDownDividerItem/>
								<DropDownLinkItem>Seperated Action</DropDownLinkItem>
							</DropDownMenuContent>
						</NavDropDownItem>
					</NavBarMenu>
				</ChildContent>
			</NavBar>
		</Run>
		<Code>
			@MD.Write(@"
```html
<NavBar BgColor=""BgColor.Light"">
	<BrandContent>
		<NavBarBrand>NavBar</NavBarBrand>
	</BrandContent>
	<ChildContent>
		<NavBarMenu CssClass=""Css.Class.Margin(SpaceNum.Auto, SpaceSide.Right)"">
			<NavItem>
				<NavRouteLink Actived>Home</NavRouteLink>
			</NavItem>
			<NavItem>
				<NavRouteLink>Link</NavRouteLink>
			</NavItem>
			<NavDropDownItem>
				<ToggleContent>Dropdown</ToggleContent>
				<DropDownMenuContent>
					<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
					<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
					<DropDownDivider/>
					<DropDownLinkItem>Seperated Action</DropDownLinkItem>
				</DropDownMenuContent>
			</NavDropDownItem>
		</NavBarMenu>
	</ChildContent>
</NavBar>
```")
		</Code>
	</Demo>
	<Demo Title="Brand">
		<Description>
			In <code>BrandContent</code>, use <code>NavBarBrand</code> to render the brand witch support link as &lt;a> by default, Set <code>Texted</code>  as &lt;span>.
		</Description>
		<Run>
			<NavBar>
				<BrandContent>					
					<NavBarBrand href="#">NavBar</NavBarBrand>
				</BrandContent>
			</NavBar>
			<br />
			<NavBar>
				<BrandContent>					
					<NavBarBrand Texted>NavBar</NavBarBrand>
				</BrandContent>
			</NavBar>
		</Run>
		<Code>
			@MD.Write(@"
```html
<!--As a link-->
<NavBar>
	<BrandContent>		
		<NavBarBrand href=""#"">NavBar</NavBarBrand>
	</BrandContent>
</NavBar>

<!--As a text-->
<NavBar>
	<BrandContent>
		<NavBarBrand Texted>NavBar</NavBarBrand>
	</BrandContent>
</NavBar>
```
			")
		</Code>
	</Demo>
	<Demo Title="Image & Text">
		<Description>

		</Description>
		<Run>
			<NavBar BgColor="BgColor.Light">
				<BrandContent>					
					<NavBarBrand href="#">
						<img src="/img/bootstrap-logo.svg" width="30" height="24"/>
					</NavBarBrand>
				</BrandContent>
			</NavBar>
			<br />
			<NavBar BgColor="BgColor.Light">
				<BrandContent>					
					<NavBarBrand href="#">
						<img src="/img/bootstrap-logo.svg" width="30" height="24"/>
						Bootstrap
					</NavBarBrand>
				</BrandContent>
			</NavBar>
		</Run>
		<Code>
			@MD.Write(@"
```html
<NavBar>
	<BrandContent>					
		<NavBarBrand href=""#"">
			<img src=""/img/bootstrap-logo.svg"" width=""30"" height=""24""/>
		</NavBarBrand>
	</BrandContent>
</NavBar>
<br />
<NavBar>
	<BrandContent>					
		<NavBarBrand href=""#"">
			<img src=""/img/bootstrap-logo.svg"" width=""30"" height=""24""/>
			Bootstrap
		</NavBarBrand>
	</BrandContent>
</NavBar>
```
			")
		</Code>
	</Demo>
</Pager>